/**
 * Created by zhouli on 18/1/17
 * Email li.zhou@huilianyi.com
 */
import React from 'react';
import {Button, Form, Input, Col, Row, Switch, Icon} from 'antd';
import {messages} from "share/common";
import menuRoute from 'routes/menuRoute';
import PGService from 'containers/setting/person-group/person-group.service';
import 'styles/setting/person-group/new-person-group.scss';
import { LanguageInput } from 'components/index';
const FormItem = Form.Item;

class NewPersonGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      statusCode: messages('common.enabled'), /*启用*/
      userGroup: { //人员组详情数据
        name: '', //人员组名称
        comment: '', //描述
        i18n: {} //多语言，包含人员组名称，描述
      }
    };
  }
  componentDidMount() {
    if (this.props.params.oid) {
      this.getGroupDetail();
    }
  }

  getGroupDetail = () => {
    //根据路径上的oid,查出该条完整数据
    PGService.getPersonGroupDetail(this.props.params.oid)
      .then((response) => {
        this.initDetailData(response.data);
      })
  }

  //初始化人员组详情页数据
  initDetailData = (data)=>{
    this.props.form.setFieldsValue({
      'code': data.code,
      'name': data.name,
      'comment': data.comment,
      'enabled': data.enabled
    });
    this.setState({
      userGroup: data
    });
  };

  handleSave = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let _userGroup = this.state.userGroup;
        this.setState({
          loading: true,
        });
        if (this.props.params.oid) {
          _userGroup.code = values.code;
          _userGroup.enabled = values.enabled;
          PGService.UpdatePersonGroup(_userGroup)
            .then((response) => {
              if (response) {
                this.setState({loading: false});
                this.context.router.push(menuRoute.getMenuItemByAttr('person-group', 'key')
                  .children.personGroupDetail.url.replace(':oid', response.data.userGroupOID).replace(':id', response.data.id));
              }
            })
            .catch(() => {
              this.setState({loading: false});
            })
        } else {
          values.i18n = _userGroup.i18n;
          PGService.createPersonGroup(values)
            .then((response) => {
              if (response) {
                this.setState({loading: false});
                this.context.router.push(menuRoute.getMenuItemByAttr('person-group', 'key')
                  .children.personGroupDetail.url.replace(':oid', response.data.userGroupOID).replace(':id', response.data.id));
              }
            })
            .catch(() => {
              this.setState({loading: false});
            })
        }
      }
    });
  };
  //点击取消，返回
  handleCancel = (e) => {
    e.preventDefault();
    this.context.router.goBack();
  };

  //人员组名称：多语言
  i18nNameChange = (name, i18nName) => {
    const userGroup = this.state.userGroup;
    userGroup.name = name;
    if (!userGroup.i18n) {
      userGroup.i18n = {};
    }
    userGroup.i18n.name = i18nName;
  };

  //描述：多语言
  i18nCommentChange = (name, i18nName) => {
    const userGroup = this.state.userGroup;
    userGroup.comment = name;
    if (!userGroup.i18n) {
      userGroup.i18n = {};
    }
    userGroup.i18n.comment = i18nName;
  };

  render() {
    const {getFieldDecorator} = this.props.form;
    const {statusCode, loading, userGroup} = this.state;

    return (
      <div className="new-person-group">
        <Form onSubmit={this.handleSave} onChange={this.handleChange}>
          <Row gutter={24}>
            <Col span={8}>
              <FormItem
                label={messages('setting.key820'/*人员组代码*/)}
                colon={true}>
                {getFieldDecorator('code', {
                  rules: [
                    {required: true, message: messages('common.please.enter')},
                    {max: 50, message:messages('setting.key821'/*最多50个字符*/)}
                  ]
                })(
                  <Input placeholder={`${messages('common.please.enter')}，${messages('setting.key821'/*最多50个字符*/)}`}
                         disabled={!!(this.props.params.oid && userGroup.code)}/>)
                }
              </FormItem>
              {!this.props.params.oid && (
                <div className="person-group-tips">
                  {messages('setting.key1463'/*注：人员组代码保存后将不可修改*/)}
                </div>
              )}
            </Col>
            <Col span={8}>
              <FormItem
                label={messages('setting.key823'/*人员组名称*/)}
                colon={true}>
                {getFieldDecorator('name', {
                  rules: [
                    {required: true, message: messages('common.please.enter')},
                  ]
                })(
                  <LanguageInput
                    key={1}
                    name={userGroup.name}
                    i18nName={userGroup.i18n && userGroup.i18n.name ? userGroup.i18n.name : null}
                    placeholder={messages('common.please.enter')/* 请输入 */}
                    isEdit={userGroup.id}
                    nameChange={this.i18nNameChange}
                  />
                )}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem
                label={messages('setting.key186'/*描述*/)}
                colon={true}>
                {getFieldDecorator('comment', {
                  rules: [
                    {required: true, message: messages('common.please.enter')},
                    {max: 150, message:messages('setting.key824'/*最多150个字符*/)}
                  ]
                })(
                  <LanguageInput
                    key={2}
                    name={userGroup.comment}
                    i18nName={userGroup.i18n && userGroup.i18n.comment ? userGroup.i18n.comment : null}
                    placeholder={`${messages('common.please.enter')}，${messages('setting.key824'/*最多150个字符*/)}`}
                    isEdit={userGroup.id}
                    nameChange={this.i18nCommentChange}
                  />
                )}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={8}>
              <FormItem
                label={messages('common.status', {status: statusCode})}
                colon={false}>
                {getFieldDecorator("enabled", {
                  initialValue: true,
                  valuePropName: 'checked',
                  rules: [
                    {
                      validator: (item, value, callback) => {
                        this.setState({
                          statusCode: value ? messages('common.enabled') /*启用*/
                            : messages('common.disabled') /*禁用*/
                        })
                        callback();
                      }
                    }
                  ],
                })
                (<Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="cross"/>}/>)
                }
              </FormItem>
            </Col>
          </Row>
          <Button type="primary" loading={loading} htmlType="submit">
            {messages('common.save') /*保存*/}
          </Button>
          <Button onClick={this.handleCancel} style={{marginLeft: 8}}>
            {messages('common.cancel') /*取消*/}
          </Button>
        </Form>
      </div>
    )
  }
}

NewPersonGroup.contextTypes = {
  router: React.PropTypes.object
};
const WrappedNewPersonGroup = Form.create()(NewPersonGroup);
export default WrappedNewPersonGroup;
